<template>
  <div class="box box-primary">
    <!--  表格标题  -->
    <div class="box-header with-border">
      <h3 class="box-title">{{title}}</h3>
      <!--  搜索框  -->
      <div class="box-tools pull-right">
        <div class="has-feedback">
          <input type="text" v-model="searchStr" class="form-control input-sm" style="width: 350px;" :placeholder="searchHint">
          <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
        </div>
      </div>
    </div>

    <!-- 表格内容 -->
    <div class="box-body" >
      <div class="btn_area">
        <el-button v-if="canAdd" size="mini" @click="handleAdd"><i class="fa fa-plus"></i>&nbsp;&nbsp;新增</el-button>
        <el-button v-if="canBack" size="mini" class="pull-right" style="margin-bottom: 5px" @click="handleBack"><i class="fa fa-chevron-left"></i>&nbsp;&nbsp;返回</el-button>
        <slot name="buttonArea"></slot>
      </div>
      <el-table
        ref="table"
        :data="pageData.data"
        :row-class-name="rowClassName"
        :empty-text="emptyText"
        :stripe="stripe"
        :show-summary="showSummary"
        @filter-change="filterChange"
        @sort-change="sortChange"
        @select="handleSelect"
        @select-all="handleSelectAll"
        show-overflow-tooltip
        border>
        <slot></slot>
      </el-table>
    </div>
    <!--  表格分页  -->
    <div class="box-footer">
      <!--页脚左侧-->
      <slot name="footer"></slot>
      <!--分页操作-->
      <el-pagination
        class="pull-right"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        :current-page="pageData.currentPage"
        layout="total,sizes,prev,pager,next"
        @size-change="sizeChange"
        @current-change="pageTurning">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import _ from "../lodash/lodash.js"

  export default {
    name:"Table",
    data() {
      return {
        searchStr:""
      }
    },
    props:{

      /* 表格标题 */
      title: {
        type: String,
        required: true
      },

      /** 行类名 */
      rowClassName:Function,

      /* 分页数据 */
      pageData: {
        type:Object,
        required: true
      },

      /* 表格数据为空时的提示语句 */
      emptyText:{
        type:String,
        default:"暂无数据"
      },

      /* 搜索框提示 */
      searchHint: String,

      /* 是否显示新增按钮 */
      canAdd: {
        type: Boolean,
        default: false
      },

      /* 是否显示返回按钮 */
      canBack: {
        type: Boolean,
        default:false
      },

      /* 是否显示斑马纹 */
      stripe: {
        type: Boolean,
        default:true
      },

      showSummary:{
        type:Boolean,
        default:false
      }
    },
    methods: {

      /* 尺寸调整事件 */
      sizeChange(pageSize) {
        this.$emit("sizeChange", pageSize);
      },

      /* 翻页事件 */
      pageTurning(index) {
        this.$emit("pageTurning", index);
      },

      /* 过滤条件变化事件 */
      filterChange(filters) {
        this.$emit("filterChange", {prop:Object.keys(filters)[0], values:Object.values(filters)[0]});
      },

      /* 排序事件 */
      sortChange({column, prop, order}) {
        this.$emit("sortChange", {column, prop, order});
      },

      search: _.debounce(function() {
          this.$emit("search", this.searchStr);
      }, 500),

      /* 处理新增事件 */
      handleAdd() {
        this.$emit("onAdd");
      },

      /** 单选事件 */
      handleSelect(selection, row) {
        this.$emit("select", selection, row);
      },

      /** 全选事件 */
      handleSelectAll(selection) {
        this.$emit("selectAll", selection);
      },

      /* 处理返回事件 */
      handleBack() {
        this.$emit("onBack");
      },

      /** 表格行选中方法 */
      toggleRowSelection(item, isChecked) {
        if(this.$refs["table"]) {
          this.$refs["table"].toggleRowSelection(item, isChecked)
        }
      }
    },
    watch:{
      searchStr:function() {
        this.search();
      }
    }
  }
</script>

<style scope>
  .btn_area {
    padding-bottom: 5px;
  }
</style>



// WEBPACK FOOTER //
// Table.vue?dd01acdc
